// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

$font-path: '/media/protocol/fonts';
$image-path: '/media/protocol/img';

@import '~@mozilla-protocol/core/protocol/css/includes/lib';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo';
@import '~@mozilla-protocol/core/protocol/css/components/logos/logo-product-firefox';

.firefox-share {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;

    h1 {
        font-weight: normal;
    }

    .tagline {
        @include text-body-xl;
        color: $color-black;
    }
}

.copy-wrapper {
    margin-top: $spacing-xl;
    margin-bottom: $layout-lg;

    .copy-text {
        background-color: $color-green-10;
        color: $color-black;
        border-radius: $border-radius-lg;
        padding: $layout-md;
        margin-bottom: $spacing-lg;

        p {
            margin-bottom: 0;
            max-width: 470px;
        }
    }

    button {
        border: 0;
        border-radius: $border-radius-sm;
        background-color: $color-green-60;
        color: $color-white;
        font-weight: bold;
        cursor: pointer;
        padding: $spacing-md $spacing-lg;
        transition: 100ms;

        #share-cta {
            display: block;
        }

        #text-copied {
            display: none;
        }

        &:hover {
            background-color: $color-green-70;
        }
    }
}

.sign-off {
    margin: $layout-xl 0;
    text-align: center;

    strong {
        display: block;

        @media #{$mq-md} {
            display: inline;
        }
    }
}
